<!--  -->
<template>
    <div id="echart-tu2" style="width: 100%;height: 800px;"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { uniqBy, uniq } from 'lodash';
import { GraphChart, LinesChart } from 'echarts/charts'
import { TooltipComponent, TitleComponent, GraphicComponent, LegendComponent } from 'echarts/components'
echarts.use([GraphChart, LinesChart, TooltipComponent, TitleComponent, GraphicComponent, LegendComponent])
import { onMounted } from 'vue'
var nodes = [
    {
        x: "8",
        y: "12",
        name: "DNS",
        img: "../asset/main.png",
    },
    {
        x: "1",
        y: "3",
        name: "爬虫数据",
        img: "../asset/main.png",
    },
    {
        x: "3",
        y: "12",
        name: "域名缓存",
        img: "../asset/main.png",
    },
    {
        x: "3",
        y: "8",
        name: "DPI用户面",
        img: "../asset/main.png",
    },
    {
        x: "3",
        y: "5",
        name: "场景特征",
        img: "../asset/main.png",
    },
    {
        x: "3",
        y: "1",
        name: "终端特征",
        img: "../asset/main.png",
    },
    {
        x: "5",
        y: "10",
        name: "增强特征",
        img: "../asset/main.png",
    },
    {
        x: "7",
        y: "12",
        name: "HTTP",
        img: "../asset/main.png",
    },
    {
        x: "7",
        y: "8",
        name: "通用",
        img: "../asset/main.png",
    },
    {
        x: "9",
        y: "10",
        name: "用户中间表",
        img: "../asset/main.png",
    },
    {
        x: "9",
        y: "6",
        name: "网元信息表",
        img: "../asset/main.png",
    },
    {
        x: "11",
        y: "8",
        name: "质差网元",
        img: "../asset/main.png",
    },
];
var links = [
    {
        source: "DNS",
        target: "域名缓存",
        name: "访问",
    },
    {
        source: "爬虫数据",
        target: "场景特征",
        name: "访问",
    },
    {
        source: "爬虫数据",
        target: "终端特征",
        name: "访问",
    },
    {
        source: "域名缓存",
        target: "增强特征",
        name: "访问",
    },
    {
        source: "DPI用户面",
        target: "增强特征",
        name: "访问",
    },
    {
        source: "场景特征",
        target: "增强特征",
        name: "访问",
    },
    {
        source: "终端特征",
        target: "增强特征",
        name: "访问",
    },
    {
        source: "增强特征",
        target: "HTTP",
        name: "访问",
    },
    {
        source: "增强特征",
        target: "通用",
        name: "访问",
    },
    {
        source: "HTTP",
        target: "用户中间表",
        name: "访问",
    },
    {
        source: "通用",
        target: "用户中间表",
        name: "访问",
    },
    {
        source: "用户中间表",
        target: "质差网元",
        name: "访问",
    },
    {
        source: "网元信息表",
        target: "质差网元",
        name: "访问",
    },
];
const sqlList = [
    {
        F_ID: null, //父节点id
        F_NAME: null, //父节点名称
        T_ID: '001', //当前节点id
        T_NAME: 'DNS',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 11, //当前节点value
        T_LINE_NAME: null,
        "LEGEND": "子子子子分类",
    },
    {
        F_ID: null, //父节点id
        F_NAME: null, //父节点名称
        T_ID: '002', //当前节点id
        T_NAME: '爬虫数据',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/white.png', //当前节点图片
        T_VALUE: 12, //当前节点value
        T_LINE_NAME: null,
        "LEGEND": "子子子子分类",
    },
    {
        F_ID: null, //父节点id
        F_NAME: null, //父节点名称
        T_ID: '003', //当前节点id
        T_NAME: 'DPI用户面',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/blue.png', //当前节点图片
        T_VALUE: 13, //当前节点value
        T_LINE_NAME: null,
        "LEGEND": "子子子分类",
    },
    {
        F_ID: null, //父节点id
        F_NAME: null, //父节点名称
        T_ID: '004', //当前节点id
        T_NAME: '网元信息表',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/main.png', //当前节点图片
        T_VALUE: 14, //当前节点value
        T_LINE_NAME: null,
        "LEGEND": "分类",
    },
    {
        F_ID: '001', //父节点id
        F_NAME: 'DNS', //父节点名称
        T_ID: '005', //当前节点id
        T_NAME: '域名缓存',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 15, //当前节点value
        T_LINE_NAME: '访问111',
        "LEGEND": "子子子分类",
    },
    {
        F_ID: '002', //父节点id
        F_NAME: '爬虫数据', //父节点名称
        T_ID: '006', //当前节点id
        T_NAME: '场景特征',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/white.png', //当前节点图片
        T_VALUE: 15, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子子子分类",
    },
    {
        F_ID: '002', //父节点id
        F_NAME: '爬虫数据', //父节点名称
        T_ID: '007', //当前节点id
        T_NAME: '终端特征',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/white.png', //当前节点图片
        T_VALUE: 15, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子子子分类",
    },
    {
        F_ID: '005', //父节点id
        F_NAME: '域名缓存', //父节点名称
        T_ID: '008', //当前节点id
        T_NAME: '增强特征',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 15, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子子分类",
    },
    {
        F_ID: '003', //父节点id
        F_NAME: 'DPI用户面', //父节点名称
        T_ID: '008', //当前节点id
        T_NAME: '增强特征',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 15, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子子分类",
    },
    {
        F_ID: '006', //父节点id
        F_NAME: '场景特征', //父节点名称
        T_ID: '008', //当前节点id
        T_NAME: '增强特征',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 15, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子子分类",
    },
    {
        F_ID: '007', //父节点id
        F_NAME: '终端特征', //父节点名称
        T_ID: '008', //当前节点id
        T_NAME: '增强特征',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 415, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子子分类",
    },
    {
        F_ID: '008', //父节点id
        F_NAME: '增强特征', //父节点名称
        T_ID: '009', //当前节点id
        T_NAME: 'HTTP',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 33, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子分类",
    },
    {
        F_ID: '008', //父节点id
        F_NAME: '增强特征', //父节点名称
        T_ID: '010', //当前节点id
        T_NAME: '通用',//当前节点名称
        T_COLOR: '#FFFFFF', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 19, //当前节点value
        T_LINE_NAME: '访问222',
        "LEGEND": "子分类",
    },
    {
        F_ID: '009', //父节点id
        F_NAME: 'HTTP', //父节点名称
        T_ID: '011', //当前节点id
        T_NAME: '用户中间表',//当前节点名称
        T_COLOR: '#cccccc', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 28, //当前节点value
        T_LINE_NAME: '访问90909',
        "LEGEND": "分类",
    },
    {
        F_ID: '010', //父节点id
        F_NAME: '通用', //父节点名称
        T_ID: '011', //当前节点id
        T_NAME: '用户中间表',//当前节点名称
        T_COLOR: '#cccccc', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 28, //当前节点value
        T_LINE_NAME: '访问90909',
        "LEGEND": "分类",
    },
    {
        F_ID: '011', //父节点id
        F_NAME: '用户中间表', //父节点名称
        T_ID: '012', //当前节点id
        T_NAME: '质差网元',//当前节点名称
        T_COLOR: '#2068B4', //当前节点颜色
        T_IMAGE: '../asset/green.png', //当前节点图片
        T_VALUE: 28, //当前节点value
        T_LINE_NAME: '访问90909',
        "LEGEND": "总类",
    },
    {
        F_ID: '004', //父节点id
        F_NAME: '网元信息表', //父节点名称
        T_ID: '012', //当前节点id
        T_NAME: '质差网元',//当前节点名称
        T_COLOR: '#2068B4', //当前节点颜色
        T_IMAGE: '../static/img/asset/green.png', //当前节点图片
        T_VALUE: 28, //当前节点value
        T_LINE_NAME: '访问90909',
        "LEGEND": "总类",
    }
]
let charts2 = {
    nodes: [],
    links: [],
    linesData: [],
}
let legendes = []
var dataMap2 = new Map();
sqlList.forEach(item => {
    let node = {
        name: item.T_NAME,
        // value: [x, y],
        symbolSize: 50,
        // alarm: nodes[j].alarm,
        symbol: "image://" + item.T_IMAGE,
        // label: {
        //     show: true,
        //     color: item.T_COLOR,
        // },
        itemStyle: {
            color: item.T_COLOR,
        },
        category:item.LEGEND
    }
    charts2.nodes.push(node)
    if (item.F_ID) {
        let link = {
            source: item.F_NAME,
            target: item.T_NAME,
            label: {
                show: true,
                formatter: item.T_LINE_NAME,
            },
            lineStyle: {
                color: "#12b5d0",
            },
        }
        charts2.links.push(link);
        // 组装动态移动的效果数据
            let lines = [
                {
                    coord: dataMap2.get(item.F_NAME),
                },
                {
                    coord: dataMap2.get(item.T_NAME),
                },
            ];
            charts2.linesData.push(lines);
    }
    legendes.push(item.LEGEND)
})
charts2.nodes = uniqBy(charts2.nodes, 'name') //去重
legendes = uniq(legendes)
console.log(legendes,'==legendes')
console.log(charts2, '==charts2');
var charts = {
    nodes: [],
    links: [],  
    linesData: [],
};

var dataMap = new Map();
for (var j = 0; j < nodes.length; j++) {
    var x = parseInt(nodes[j].x);
    var y = parseInt(nodes[j].y);
    var node = {
        name: nodes[j].name,
        // value: [x, y],
        symbolSize: 50,
        // alarm: nodes[j].alarm,
        symbol: "image://" + nodes[j].img,
        itemStyle: {
            color: "#12b5d0",
        },
    };
    // dataMap.set(nodes[j].name, [x, y]);
    charts.nodes.push(node);
}
for (var i = 0; i < links.length; i++) {
    var link = {
        source: links[i].source,
        target: links[i].target,
        label: {
            show: true,
            formatter: links[i].name,
        },
        lineStyle: {
            color: "#12b5d0",
        },
    };

    charts.links.push(link);
    // 组装动态移动的效果数据
    var lines = [
        {
            coord: dataMap.get(links[i].source),
        },
        {
            coord: dataMap.get(links[i].target),
        },
    ];
    charts.linesData.push(lines);
}
console.log(charts, '==charts')

var option = {
    title: {
        text: "网络拓扑图",
    },
    tooltip: {
        trigger: "item",
        formatter: "{b}",
    },
    legend:[{
        data:['总类','分类','子分类','子子分类','子子子分类','子子子子分类']
    }],
    backgroundColor: "#F5F5F5",
    // xAxis: {
    //     min: 0,
    //     max: 12,
    //     show: false,
    //     type: "value",
    // },
    // yAxis: {
    //     min: 0,
    //     max: 12,
    //     show: false,
    //     type: "value",
    // },
    series: [
        {
            type: "graph",
            layout: "force",
            force: {
                initLayout:'circular',
                repulsion: 1000,
                gravity: 0.1,
                edgeLength: 50,
                layoutAnimation: true,
            },
            id: "a",
            legendHoverLink: false,
            focusNodeAdjacency: true,
            // coordinateSystem: "cartesian2d",
            // edgeSymbol: ["none", "arrow"],
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [0, 10],
            symbolSize: 50,
            label: {
                normal: {
                    show: true,
                    position: "bottom",
                    color: "#12b5d0",
                },
            },
            lineStyle: {
                normal: {
                    width: 2,
                    shadowColor: "none",
                },
            },
            // xAxis: {
            //     min: 0,
            //     max: 12,
            //     show: false,
            //     type: "value",
            // },
            // yAxis: {
            //     min: 0,
            //     max: 12,
            //     show: false,
            //     type: "value",
            // },
            categories:[
                {
                    name:'总类'
                },
                {
                    name:'分类'
                },
                {
                    name:'子分类'
                },
                {
                    name:'子子分类'
                },
                {
                    name:'子子子分类'
                },
                {
                    name:'子子子子分类'
                }
            ],
            // edgeSymbolSize: 8,
            draggable: false,
            // data: charts.nodes,
            data: charts2.nodes,
            // links: charts.links,
            links: charts2.links,
            z: 4,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        formatter: function (item) {
                            return item.data.name;
                        },
                    },
                },
            },
        },
        // {
        //     name: "A",
        //     type: "lines",
        //     coordinateSystem: "cartesian2d",
        //     z: 4,
        //     effect: {
        //         show: true,
        //         trailLength: 0,
        //         symbol: "arrow",
        //         color: "#12b5d0",
        //         symbolSize: 8,
        //     },
        //     lineStyle: {
        //         normal: {
        //             curveness: 0,
        //         },
        //     },
        //     data: charts.linesData,
        // },
    ],
};
onMounted(() => {
    let dom = document.getElementById('echart-tu2')
    let myChart = echarts.init(dom)
    console.log(option,'==option');
    myChart.setOption(option);
    myChart.on("click", function (param) {
        var nodeses = [
            {
                x: "1",
                y: "12",
                name: "DNS",
                img: "../asset/main.png",
            },
            {
                x: "1",
                y: "3",
                name: "爬虫数据",
                img: "../asset/main.png",
            },
        ];
        var linkses = [
            {
                source: "DNS",
                target: "爬虫数据",
                name: "访问",
            },
        ];
        console.info(1);
        var chartses = {
            nodeses: [],
            linkses: [],
            linesDataes: [],
        };
        var dataMapes = new Map();
        for (var j = 0; j < nodeses.length; j++) {
            var x = parseInt(nodeses[j].x);
            var y = parseInt(nodeses[j].y);
            var node = {
                name: nodeses[j].name,
                value: [x, y],
                symbolSize: 50,
                alarm: nodeses[j].alarm,
                symbol: "image://" + nodeses[j].img,
                itemStyle: {
                    normal: {
                        color: "#12b5d0",
                    },
                },
            };
            dataMapes.set(nodeses[j].name, [x, y]);
            chartses.nodeses.push(node);
        }
        for (var i = 0; i < linkses.length; i++) {
            var link = {
                source: linkses[i].source,
                target: linkses[i].target,
                label: {
                    normal: {
                        show: true,
                        formatter: linkses[i].name,
                    },
                },
                lineStyle: {
                    normal: {
                        color: "#12b5d0",
                    },
                },
            };

            chartses.linkses.push(link);
            // 组装动态移动的效果数据
            var linesess = [
                {
                    coord: dataMapes.get(linkses[i].source),
                },
                {
                    coord: dataMapes.get(linkses[i].target),
                },
            ];
            chartses.linesDataes.push(linesess);
        }
        myChart.setOption({
            notMerge: true,
            series: [
                {
                    data: chartses.nodeses,
                    links: chartses.linkses,
                },
                {
                    data: chartses.linesDataes,
                },
            ],
        });
    });

    // myChart.setOption({
    //     graphic: echarts.util.map(charts.nodes, function (item, dataIndex) {
    //         return {
    //             type: "circle",
    //             position: myChart.convertToPixel("grid", item.value),
    //             shape: {
    //                 cx: 5,
    //                 cy: 5,
    //                 r: 20,
    //             },
    //             invisible: true,
    //             draggable: true,
    //             ondrag: echarts.util.curry(onPointDragging, dataIndex),
    //             onmousemove: echarts.util.curry(showTooltip, dataIndex),
    //             onmouseout: echarts.util.curry(hideTooltip, dataIndex),
    //             z: 100,
    //         };
    //     }),
    // });

    function onPointDragging(dataIndex, dx, dy) {
        console.log("tempV-----");
        var tempV = myChart.convertFromPixel("grid", this.position);
        console.log("tempV", tempV);
        charts.nodes[dataIndex].value = [tempV[0], tempV[1]];
        // Update data
        myChart.setOption({
            series: [
                {
                    id: "a",
                    data: charts.nodes,
                },
            ],
        });
    }

    function showTooltip(dataIndex) {
        myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: dataIndex,
        });
    }

    function hideTooltip(dataIndex) {
        myChart.dispatchAction({
            type: "hideTip",
        });
    }

    window.addEventListener("resize", function () {
        myChart.resize();
        // myChart.setOption({
        //     series: [
        //         {
        //             id: "a",
        //             data: charts.nodes,
        //         },
        //     ],
        // });
    });

})

</script>

<style lang='scss' scoped></style>